import styles from './index.module.less';
import type { FC, ReactNode, CSSProperties } from 'react';
import classNames from 'classnames';

type TLoadingType = 'water' | 'verticalBar';

interface IProps {
  type?: TLoadingType;
  wrapClassName?: string;
  loadingClassName?: string;
  wrapStyle?: CSSProperties;
  loadingStyle?: CSSProperties;
}

const Loading: FC<IProps> = ({
  type = 'verticalBar',
  wrapClassName,
  loadingClassName,
  wrapStyle,
  loadingStyle
}) => {
  const getStructure = (): ReactNode => {
    switch (type) {
      case 'water':
        return (
          <div
            className={classNames(styles['loading-water'], loadingClassName)}
            style={loadingStyle}
          >
            <div />
            <div />
            <div />
            <div />
          </div>
        );

      case 'verticalBar':
        return (
          <div
            className={classNames(styles['loading-vertical-bar'], loadingClassName)}
            style={loadingStyle}
          >
            <div />
            <div />
            <div />
            <div />
            <div />
          </div>
        );
      default:
        return null;
    }
  };

  return (
    <div className={styles['box-loading']}>
      <div className={classNames(styles['loading-wrap'], wrapClassName)} style={wrapStyle}>
        {getStructure()}
      </div>
    </div>
  );
};

export default Loading;
